<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:replace="fragments/head :: head"></head>

<body>
<!-- Wrapper -->
<div id="wrapper">
	<!-- Sidebar -->
	<div id="sidebar-wrapper" th:replace="fragments/nav :: nav"></div>
	<!-- #Sidebar -->

	<!-- Page Content -->
	<div id="page-content-wrapper">
		<div class="container-fluid">
			<div class="row">
				<div class="col-lg-12">
					<h1 th:text="${title}">TITLE</h1>
					<div th:if="${error != null}" th:text="${error}" class="alert alert-danger" role="alert">Error message</div>
					<div th:switch="${error != null}">
						<!--/* Else, show clusters */-->
						<div th:case="${false}">
							<div class="table-responsive">
								<div th:switch="${#lists.size(clusters) > 0}">
									<div th:case="${false}" class="alert alert-info" role="alert">No Druid clusters to display</div>
									<table id="reportTable" th:case="${true}" class="table table-striped table-hover table-bordered">
										<thead>
										<tr>
											<th>Cluster ID</th>
											<th>Cluster Name</th>
											<th>Status</th>
											<th>Description</th>
											<th>Broker Host</th>
											<th>Broker Port</th>
											<th>Broker Endpoint</th>
											<th>Time SLA</th>
										</tr>
										</thead>
										<tbody>
										<tr th:each="cluster: ${clusters}" class="clickable-row"
										    th:attr="data-href=${ '/Druid/Cluster/' + cluster.getClusterId() }">
											<td th:text="${cluster.getClusterId()}">Cluster ID</td>
											<td th:text="${cluster.getClusterName()}">Cluster Name</td>
											<td th:text="${cluster.getStatus()}"
											    th:styleappend="${
											        cluster.getStatus() == 'OK'
											            ? 'color: #4caf50'
											            : (cluster.getStatus() == 'ERROR'
											            ? 'color: #f44336'
											            : 'color: #ff9800')
											    }"
											>
												Cluster Status
											</td>
											<td th:text="${cluster.getClusterDescription()}">Cluster Description</td>
											<td th:text="${cluster.getBrokerHost()}">Broker Host</td>
											<td th:text="${cluster.getBrokerPort()}">Broker Port</td>
											<td th:text="${cluster.getBrokerEndpoint()}">Broker Endpoint</td>
											<td th:text="${cluster.getHoursOfLag()}">Time SLA</td>
										</tr>
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- #Page Content -->
</div>
<!-- #Wrapper -->
<script th:inline="javascript">
	/*<![CDATA[*/

	$(".clickable-row").click(function() {
		window.document.location = $(this).data("href");
	});

	$('#reportTable').DataTable({
		pageLength: 100,
		order: [[ 0, 'desc' ]]
	});

	/*]]>*/
</script>

</body>

</html>
